<template>
  <view class="new-address">
    <form @submit="formSubmit">
      <view class="input-box">
        <text>收货人</text>
        <view>
          <input name="name" :value="form.name.value" @focus="focus($event, form, 'name')"
            @input="inputError($event, form, 'name')" @blur="blur($event, form, 'name')" :class="form.name.status"
            placeholder-style="font-size: 30rpx;color: #999;" placeholder="请填写收货人姓名" />
          <view class="tip">请填写收货人姓名，不能包含特殊字符</view>
        </view>
      </view>
      <view class="input-box">
        <text>手机号码</text>
        <view class="phone-number"><input @focus="focus($event, form, 'phoneNumber')"
            @input="inputError($event, form, 'phoneNumber')" @blur="blur($event, form, 'phoneNumber')" type="number"
            name="phoneNumber" :value="form.phoneNumber.value" :class="form.phoneNumber.status"
            placeholder-style="font-size: 30rpx;color: #999;" placeholder="请填写手机号" style="padding-right: 78rpx" />
          <view class="tip">请输入正确手机号码</view>
        </view>
      </view>
      <view class="input-box">
        <text>所在地区</text>
        <picker :class="'select-area' + (form.area.status || '')" mode="region" name="area" :value="region"
          :custom-item="customItem" @change="regionChange($event, form, 'area')" @cancel="cancelPicker(form, 'area')"
          @tap="showPicker(form, 'area')">
          <view class="provinces">
            <view v-if="region.length" style="color: #333">{{
              region.join("-")
            }}</view>
            <view v-else>省、市、区</view>
            <icon class="iconfont icon">&#xe641;</icon>
          </view>
          <view class="tip">请选择完整的"省、市、区</view>
        </picker>
      </view>
      <view class="input-box">
        <text>详细地址</text>
        <view>
          <textarea @focus="focus($event, form, 'address')" @input="inputError($event, form, 'address')"
            @blur="blur($event, form, 'address')" name="address" confirm-type="done" :value="form.address.value"
            :class="form.address.status" placeholder-style="font-size: 30rpx;color: #999;" placeholder="街道、小区门牌号等" /><view class="tip">长度需要2-120之间，不能包含特殊符号</view>
        </view>
      </view>
      <view class="default">
        <text>设为默认收货地址</text>
        <switch name="isDefault" :checked="form.isDefault" color="#45D585" />
      </view>
      <button form-type="submit" class="add-botton">保存</button>
    </form>
  </view>
</template>
<script>
import { model } from "@/model";
import EventBus from "@/event/index";
const { Member } = model.collection;

export default {
  data() {
    return {
      form: {
        name: {
          status: "",
          once: false,
          value: "",
        },
        phoneNumber: {
          status: "",
          once: false,
          value: "",
        },
        area: {
          value: [],
          status: "",
          once: false,
        },
        address: {
          status: "",
          once: false,
          value: "",
        },
        isDefault: false,
      },
      region: [],
      customItem: "全部",
    };
  },

  onLoad(params) {
    this.paramsAddress = params.address;
    if (this.paramsAddress) {
      uni.setNavigationBarTitle({
        title: "编辑收货地址",
      });
      let address = JSON.parse(decodeURIComponent(this.paramsAddress));
      this.form.name.value = address.consignee;
      this.form.phoneNumber.value = address.mobile;
      this.form.address.value = address.fullAddress;
      this.form.area.value = [
        address.provinceId,
        address.cityId,
        address.districtId,
      ];
      this.form.isDefault = address.isDefault;
      this.region = [
        address.provinceName,
        address.cityName,
        address.districtName,
      ];
      this.id = address.id;
    }
  },
  methods: {
    async addressAdd(form) {
      let res = await Member.sendApi("addressAdd", {
        data: form,
      });
      if (res.code !== 2000) {
        return;
      }
      !this.paramsAddress && EventBus.$emit("memberAddressList", res.data ? [res.data] : []);
      this.back();
    },
    async addressUpdate(form) {
      form.id = this.id;
      let res = await Member.sendApi("addressUpdate", {
        params: {
          type: 1,
        },
        data: form,
      });
      if (res.code !== 2000) {
        return;
      }
      this.back();
    },
    formSubmit(e) {
      let { value } = e.detail,
        className = ".input-error";

      if (value.name === "") {
        this.form.name.status = className;
        this.form.name.once = true;
        return;
      }
      if (value.phoneNumber.length !== 11) {
        this.form.phoneNumber.status = className;
        this.form.phoneNumber.once = true;
        return;
      }
      if (this.form.area.value.length !== 3) {
        this.form.area.status = className;
        this.form.area.once = true;
        return;
      }
      if (value.address.length < 2) {
        this.form.address.status = className;
        this.form.address.once = true;
        return;
      }
      typeof this.id === "number"
        ? this.addressUpdate(this.getForm(value))
        : this.addressAdd(this.getForm(value));
    },
    getForm(value) {
      return {
        cityId: +this.form.area.value[1],
        cityName: value.area[1],
        consignee: value.name,
        districtId: +this.form.area.value[2],
        districtName: value.area[2],
        provinceId: +this.form.area.value[0],
        provinceName: value.area[0],
        fullAddress: value.address,
        isDefault: Number(value.isDefault),
        mobile: value.phoneNumber,
      };
    },
    focus(e, content, type) {
      const { value } = e.detail;
      let className = ".focus";
      if (content[type].once) {
        className = value ? className : ".input-error .focus ";
        if (type == "address") {
          className = value.length > 1 ? className : ".input-error .focus ";
        }
        if (type == "phoneNumber") {
          className = value.length === 11 ? className : ".input-error .focus";
        }
      }
      content[type].status = className;
    },
    inputError(e, content, type) {
      this.focus(e, content, type);
    },
    blur(e, content, type) {
      const { value } = e.detail;
      let className = !value && ".input-error";
      if (type == "address") {
        className = value.length < 2 && ".input-error";
      }
      if (type == "phoneNumber" && content[type].once) {
        className = value.length !== 11 && ".input-error";
      }
      !content[type].once && (content[type].once = !!className);
      content[type].status = className;
    },
    showPicker(content, type) {
      content[type].status = ".focus";
    },
    regionChange(e, content, type) {
      let arr = [];
      for (let i = 0; i < e.detail.code.length; i++) {
        arr[i] = e.detail.value[i];
      }
      this.region = arr;
      content[type].value = e.detail.code;
      content[type].status =
        content[type].once && this.region.length !== 3 && ".input-error";
    },
    cancelPicker(content, type) {
      content[type].status = "";
    },
  },
};
</script>
<style lang="less" scoped>
page {
  .new-address {
    view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      input,
      textarea {
        width: 540rpx;
        height: 80rpx;
        padding: 0 30rpx;
        background: #f4f4f4;
        border-radius: 10rpx;
        box-sizing: border-box;
      }
      textarea {
        padding: 25rpx 30rpx;
        height: 180rpx;
      }
    }

    form {
      display: block;
      padding: 40rpx 30rpx 0;
      box-sizing: border-box;
      .input-box {
        margin-bottom: 30rpx;
        > view {
          position: relative;
        }

        .select-area {
          position: relative;
          padding: 0 30rpx;
          width: 540rpx;
          height: 80rpx;
          font-size: 30rpx;
          color: #999;
          background: #f4f4f4;
          border-radius: 10rpx;
          box-sizing: border-box;
          .provinces {
            > view {
              display: block;
              height: 80rpx;
              line-height: 80rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .icon {
              margin: -16rpx -18rpx 0 0;
              font-size: 30rpx;
              color: #d4d4d4;
            }
          }
          .tip {
            display: none;
          }
        }
        .select-area.focus {
          .icon {
            margin-top: 6rpx;
            color: #47bd00;
            transform: rotate(90deg);
            transform-origin: center;
          }
        }
        .select-area.input-error {
          .tip {
            position: absolute;
            display: block;
            left: 33rpx;
            bottom: -28rpx;
            font-size: 20rpx;
            color: #ff0a01;
          }
        }

        input,
        textarea {
          color: #333;
        }

        input + .tip,
        textarea + .tip {
          position: absolute;
          display: none;
          left: 33rpx;
          bottom: -28rpx;
          font-size: 20rpx;
          color: #ff0a01;
        }
        .input-error + .tip {
          display: flex;
        }
        .focus,
        .input-error {
          box-shadow: 0 0 0 1rpx #ff0a01;
        }
        .input-error {
          background-color: #ffe6e5;
        }
        .focus {
          background-color: transparent;
        }
      }

      .default {
        height: 100rpx;
        text {
          font-size: 30rpx;
        }
        switch {
          transform: scale(0.85);
        }
      }

      .add-botton {
        position: fixed;
        bottom: 40rpx;
        width: calc(100% - 60rpx);
        height: 90rpx;
        font-size: 32rpx;
        color: #fff;
        text-align: center;
        line-height: 90rpx;
        background: #db187c;
        border-radius: 15rpx;
      }
    }
  }
}
</style>